---
title: Hugo에서 마이그레이션
description: 기존 Hugo 프로젝트를 Astro로 마이그레이션하기 위한 팁
sidebar:
  label: Hugo
type: migration
stub: true
framework: Hugo
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { CardGrid, LinkCard } from '@astrojs/starlight/components';

[Hugo](https://gohugo.io)는 Go를 기반으로 구축된 오픈소스 정적 사이트 생성기입니다.

## Hugo와 Astro의 주요 유사점

Hugo와 Astro는 프로젝트 마이그레이션에 도움이 되는 몇 가지 유사점을 공유합니다.

- Hugo와 Astro는 모두 블로그와 같은 [콘텐츠 중심 웹사이트](/ko/concepts/why-astro/#콘텐츠-중심)에 이상적으로 적합한 최신 정적 사이트 생성기입니다.

- Hugo와 Astro는 모두 [Markdown으로 콘텐츠를 작성](/ko/guides/markdown-content/)할 수 있도록 해줍니다. 그러나 Hugo에는 몇 가지 특별한 프런트매터 속성이 포함되어 있으며 YAML, TOML 또는 JSON으로 프런트매터을 작성할 수 있습니다. 기존 Hugo 프론트매터 속성 중 다수가 Astro에서 "특별"하지 않더라도 기존 Markdown 파일과 YAML (또는 TOML) 프론트매터 값을 계속 사용할 수 있습니다.

- Hugo와 Astro를 사용하면 다양한 [통합 및 외부 패키지](https://astro.build/integrations/)를 통해 사이트를 향상할 수 있습니다.

## Hugo와 Astro의 주요 차이점

Astro에서 Hugo 사이트를 다시 구축하면 다음과 같은 몇 가지 중요한 차이점을 발견할 수 있습니다.

- Hugo는 페이지 템플릿 작성을 위해 Go 템플릿을 사용합니다. [Astro 구문](/ko/basics/astro-components/)은 JSX와 유사한 HTML 상위 집합입니다.

- Astro는 표준 Markdown 파일의 동적 콘텐츠에 단축 코드를 사용하지 않지만 [Astro의 MDX 통합](/ko/guides/integrations-guide/mdx/)을 사용하여 JSX를 사용할 수 있으며, MDX 파일에서 컴포넌트를 가져올 수도 있습니다.

- Hugo는 재사용 가능한 레이아웃 요소에 "partials"을 사용할 수 있지만 [Astro는 전적으로 컴포넌트 기반입니다](/ko/basics/astro-components/). 모든 `.astro` 파일은 컴포넌트, 레이아웃 또는 전체 페이지일 수 있으며 다른 Astro 컴포넌트를 가져와 렌더링할 수 있습니다. Astro 컴포넌트에는 [다른 UI 프레임워크 컴포넌트 (예: React, Svelte, Vue, Solid)](/ko/guides/framework-components/)뿐만 아니라 Markdown 또는 MDX와 같은 [프로젝트에 있는 다른 파일](/ko/guides/imports/)의 콘텐츠나 메타데이터도 포함될 수 있습니다.

## Hugo에서 Astro로 전환

Hugo 블로그를 Astro로 변환하려면 블로그 테마 시작 템플릿으로 시작하거나 [테마 쇼케이스](https://astro.build/themes/)에서 더 많은 커뮤니티 블로그 테마를 탐색하세요.

공식 스타터 중 하나를 사용하여 새로운 Astro 프로젝트를 시작하려면 `--template` 인수를 `create astro` 명령에 전달할 수 있습니다. 또는 [GitHub의 기존 Astro 저장소에서 새 프로젝트를 시작](/ko/install-and-setup/#cli-마법사로-설치)할 수 있습니다.

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm create astro@latest -- --template blog
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm create astro@latest --template blog
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn create astro --template blog
    ```
    </Fragment>
  </PackageManagerTabs>

[Markdown 또는 MDX 페이지를 생성](/ko/guides/markdown-content/)하기 위해 기존 Markdown (또는 선택적 통합이 포함된 MDX) 파일을 콘텐츠로 가져오세요. Astro는 이러한 파일에서 YAML 프런트매터만 허용하므로 프런트매터를 YAML로 변환해야 할 수도 있습니다.

Markdown 콘텐츠에서 변수, 표현식 또는 UI 컴포넌트와 같은 동적 콘텐츠를 계속 사용하려면 Astro의 선택적 MDX 통합을 추가하고 기존 Markdown 파일을 [MDX 페이지](/ko/guides/markdown-content/)로 변환하세요. MDX는 YAML 및 TOML 프런트매터을 지원하므로 기존 프런트매터 속성을 유지할 수 있습니다. 하지만 단축 코드 구문을 JSX 표현식 및/또는 컴포넌트 가져오기를 허용하는 [MDX 자체 구문](https://mdxjs.com/docs/what-is-mdx/#mdx-syntax)으로 바꿔야 합니다.

포트폴리오나 문서 사이트 등 다른 유형의 사이트를 변환하려면 [astro.new](https://astro.new)에서 더 많은 공식 시작 템플릿을 참조하세요. 각 프로젝트의 GitHub 저장소에 대한 링크는 물론 IDX, StackBlitz, CodeSandbox 및 Gitpod 온라인 개발 환경에서 작업 중인 프로젝트를 열 수 있는 원클릭 링크도 찾을 수 있습니다.

## 커뮤니티 리소스

<CardGrid>

  <LinkCard title="Elio Struyf의 Hugo에서 Astro로 마이그레이션하는 이야기" href="https://www.eliostruyf.com/migration-story-hugo-astro/"/>

  <LinkCard title="Hugo 대 Astro - 2023년에 어떤 정적 사이트 생성기를 선택해야 할까요?" href="https://onebite.dev/hugo-vs-astro-which-static-site-generator-to-choose-in-2023/"/>

  <LinkCard title="AI의 도움을 받아 Astro로 마이그레이션하면서 얻은 교훈" href="https://bennet.org/blog/lessons-from-ai-assisted-migration-to-astro/" />

</CardGrid>

:::note[공유할 리소스가 있나요?]
Hugo 사이트에서 Astro로 전환하는 방법에 대한 유용한 비디오나 블로그 게시물을 찾았거나 직접 만들었다면, [이 목록](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/migrate-to-astro/from-hugo.mdx)에 추가해 주세요!
:::
